<template>
  <n-layout
    has-sider
    position="absolute"
  >
    <n-layout-sider
      collapse-mode="width"
      :collapsed-width="20"
      :width="200"
      show-trigger="arrow-circle"
      bordered
      :default-collapsed="collapsed"
    >
      <n-scrollbar>
        <n-menu
          v-model:value="currentKey"
          :options="menuList"
          default-expand-all
          @update:value="onUpdateKey"
        >
        </n-menu>
      </n-scrollbar>
    </n-layout-sider>
    <n-layout-content style="padding: 20px">
      <router-view />
    </n-layout-content>
  </n-layout>
</template>

<script setup lang="ts">
import {
  NLayout,
  NLayoutSider,
  NLayoutContent,
  NScrollbar,
  NMenu
} from 'naive-ui'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const menuList = [
  {
    label: '指南',
    key: 'guide',
    children: [
      {
        label: '介绍',
        key: 'introduce'
      },
      {
        label: '开始',
        key: 'start'
      },
      {
        label: '配置',
        key: 'setting'
      },
      {
        label: '路由',
        key: 'router'
      },
      {
        label: '权限',
        key: 'permission'
      },
      {
        label: '组件',
        key: 'component'
      },
      {
        label: '样式',
        key: 'style'
      },
      {
        label: 'Mock联调',
        key: 'mock'
      },
      {
        label: '构建&部署',
        key: 'build'
      },
      {
        label: '常见问题',
        key: 'question'
      },
      {
        label: '变更日志',
        key: 'log'
      }
    ]
  }
]
const router = useRouter()
const route = useRoute()
const paths = route.path.split('/')
const currentKey = ref(paths[paths.length - 1])
const collapsed = ref(document.body.clientWidth < 960)
const onUpdateKey = (key: string) => {
  router.push({ path: '/guide/' + key })
}
</script>
